Technical review: Document CSS if() function #39516
Conversation
|
Preview URLs
Flaws (3)Note! 1 document with no flaws that don't need to be listed. 🎉 URL:
URL:
(comment last updated: 2025-05-21 15:29:45) |
files/en-us/web/css/if/index.md
Outdated
| 1. The `<if-condition>` expressions are evaluated, in the order they appear in the function. | ||
| 2. The first `<if-condition>` that evaluates to true has its associated `<value>` returned. | ||
| 3. If none of the provided `<if-condition>` expressions evaluate to true (or no `<if-condition> : <value>` pairs are provided), the `else` `<value>` will be returned, if an `else : <value>` pair is included. | ||
| 4. If no `else : <value>` pair is included, nothing is returned. |
There was a problem hiding this comment.
This depends on the definition of "nothing". With no "true" conditions, <guaranteed-invalid> is returned, which would make background-image behave like unset.
Another definition of "nothing" could be an empty token sequence, e.g. if(else:).
There was a problem hiding this comment.
OK, I've tried changing this sentence to:
If no
else : <value>pair is included, {{glossary("guaranteed-invalid")}} is returned.
As we have a nice little glossary entry that explains guaranteed-invalid. Does that work?
There was a problem hiding this comment.
(in my next commit)
files/en-us/web/css/if/index.md
Outdated
|
|
||
| 1. The `<if-condition>` expressions are evaluated, in the order they appear in the function. | ||
| 2. The first `<if-condition>` that evaluates to true has its associated `<value>` returned. | ||
| 3. If none of the provided `<if-condition>` expressions evaluate to true (or no `<if-condition> : <value>` pairs are provided), the `else` `<value>` will be returned, if an `else : <value>` pair is included. |
There was a problem hiding this comment.
This sentence assumes that else is placed last, which may be a reasonable assumption/simplification.
But note that else is really just an <if-condition> that always evaluates to "true". It can appear wherever you want, and as many times as you want:
div {
background-image: if(
style(--scheme: ice): linear-gradient(to left, #caf0f8, white, #caf0f8);
else: url("debug.png");
style(--scheme: fire): linear-gradient(to left, #ffc971, white, #ffc971); /* Never considered */
else: none /* Never considered */
);
}
This is mostly useless, except if you have a long/complicated if() which doesn't behave like you expect and you need to "debug" it.
MDN doesn't necessarily need to capture that, though. :-)
There was a problem hiding this comment.
Thanks, this is really useful. I've updated my description to make it clear that it is possible to put an else: value pair anywhere, but then added a new section to talk about you should mostly just have one at the end, except for in very specific circumstances, which is where your debug example comes in.
files/en-us/web/css/if/index.md
Outdated
| However, you can only set single property values at a time with `if()`, whereas `@container` queries can be used to set whole sets of rules. You can also only check for a single property value at a time with `if()`, and can't use `and`, `or`, or `not`. There is no way to do something like this: | ||
|
|
||
| ```css | ||
| style(--scheme: dark or --scheme: very-dark): black; |
There was a problem hiding this comment.
I don't understand this example. You can do if(style((--scheme: dark) or (--scheme: very-dark)): thing).
The text above talks about if() only being able to "set" a single property at a time. I assume this refers to the fact that since if() is a conditional in the value space, it exists in the value of a single property, but it's a bit confusing to read.
Maybe it's actually the example the text confusing.
There was a problem hiding this comment.
OK, I've rewritten it, tested and included some and/or/not examples.
files/en-us/web/css/if/index.md
Outdated
| media(width < 700px): 0 auto; | ||
| ``` | ||
|
|
||
| This is really useful when you need to vary a single property value based on a media query result, however, you can't use complex media queries inside an `if()` statement (multiple queries connected via `and`, `or`, or `not` keywords). For such cases, a regular {{cssxref("@media")}} construct is needed. The two approaches are complementary, and have different uses. |
There was a problem hiding this comment.
You can use boolean logic, see https://drafts.csswg.org/css-values-5/#typedef-if-condition.
There was a problem hiding this comment.
OK, I've updated this section to suit, and included and and or examples. However, I had real trouble getting a not example to work. I ended up trying many different permutations, for example
background-color: if(
media(not (width < 500px)): blue
);
background-color: if(
not media(width < 500px): blue
);
Can you help me find an example that works? Or, is this a bug?
files/en-us/web/css/if/index.md
Outdated
| supports(color): blue; | ||
| ``` | ||
|
|
||
| Feature queries are really useful inside `if()` statements when you need to vary a single property value based on support for a particular property: value combination. however, you can't use complex feature queries inside an `if()` statement (multiple queries connected via `and`, `or`, or `not` keywords). For such cases, a regular {{cssxref("@supports")}} construct is needed. The two approaches are complementary, and have different uses. |
There was a problem hiding this comment.
The same applies here: you can use and/or/not.
There was a problem hiding this comment.
Cool, updated, and I've added some examples.
Description
Chrome supports the CSS
if()function from version 137. See https://chromestatus.com/feature/6313805904347136.This PR documents the new function. Specifically, it:
if()reference page (nearly done, just needs examples)if()to the CSS values and units module pageif()to the CSS value functions ref page.Motivation
Additional details
Related issues and pull requests